<template>
  <div class="form-css">
    <a-form class="a-form-css">
      <a-form-item>
        <a-tabs>
          <a-tab-pane key="1">
            <template #title>
              <icon-calendar/> 选择题
            </template>
          </a-tab-pane>
          <a-tab-pane key="2">
            <template #title>
              <icon-clock-circle/> 填空题
            </template>
          </a-tab-pane>
          <a-tab-pane key="3">
            <template #title>
              <icon-user/> 简答题
            </template>
          </a-tab-pane>
        </a-tabs>
      </a-form-item>
      <a-form-item  style="width: 90px">
        <a-button class="sub-css" type="primary" @click="onNextClick">
          {{ $t('stepForm.button.next') }}
        </a-button>
      </a-form-item>
    </a-form>
  </div>

</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import {FormInstance} from "@arco-design/web-vue/es/form";
  import {BaseInfoModel} from "@/api/form";

  // export default {
  //   name: "choose-question-type"
  // };

  const emits = defineEmits(['changeStep']);

  const formRef = ref<FormInstance>();
  const formData = ref<BaseInfoModel>({
    activityName: '',
    channelType: '',
    promotionTime: [],
    promoteLink: 'https://arco.design',
  });

  const onNextClick = async () => {
    const res = await formRef.value?.validate();
    if (!res) {
      emits('changeStep', 'forward', { ...formData.value });
    }
  };
</script>

<style scoped>
  .form-css{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 500px;
  }
  .a-form-css{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .sub-css{
    /*display: flex;*/
    justify-content: center;
    align-items: center;

  }
</style>